<template>
  <dv-border-box-7
    class="wordCloud"
    :color="['transparent']"
    backgroundColor="rgba(1,32,78,.8)"
  >
    <div class="wordCloud-box">
      <div class="wordCloud-head">
        <div class="title-sys">
          <img src="../assets/img7.png" alt="" />
          <span>平台项目关键词云图</span>
          <img src="../assets/img6.png" alt="" />
        </div>
      </div>
      <div class="tagBall" ref="tagBall">
<!--           @mouseover="changeAngleY" @mouseenter="enter" @mouseleave="leave">-->
        <a
          :name='item.size'
          class="tag"
          v-tip.dark="'项目数：' + item.num"
          ref="tag"
          href="#"
          v-for="(item, index) in skill_data"
          :key="index"
          style="color: transparent"
          >{{ item.skill_name }}</a
        >
      </div>
    </div>
  </dv-border-box-7>
</template>

<script>
import { skillTotal } from "../request/api";
export default {
  name: "wordCloud",
  data() {
    return {
      skill_data: [],
      tags: [],
      tagEle: [],
      RADIUS: 90,
      fallLength: 900,
      angleX: Math.PI / 1700,
      angleY: Math.PI / 1700,
      CX: "",
      CY: "",
      EX: "",
      EY: "",
      show: false,
      stopAnimation:false
    };
  },
  created() {
    this.getData();
  },
  mounted() {
    this.wordCloudInnit();
  },
  methods: {
    // 换算方法
    nowSize(val,initWidth=1920){
      //当前视口宽度
      let nowClientWidth = document.documentElement.clientWidth;
      return val * (nowClientWidth/initWidth);
    },
    compare(val1, val2) {
      return val1.num - val2.num;
    },
     randomsort(a, b) {
    return Math.random()>.5 ? -1 : 1;
    },
    getData() {
      skillTotal().then((res) => {
        for (let k of res.data.data) {
          k.value = k.num;
          k.name = k.skill_name;
        }

        if (this.skill_data.toString() !== res.data.data.toString()) {
          res.data.data.sort(this.compare);
          for(let item in res.data.data){
res.data.data[item].size = this.nowSize(parseInt(Math.ceil((parseInt(item)+1)/ (Math.ceil(res.data.data.length / 15))))+11)
          }
          this.skill_data = res.data.data;
          this.skill_data.sort(this.randomsort);
          this.timer2 = setTimeout(() => {
            this.wordCloudInnit();
          }, 100);
        }
        this.time = setTimeout(() => {
          this.getData();
          clearTimeout(this.time);
        }, 15000);
      });
    },

    wordCloudInnit() {
      let tagEle = document.querySelectorAll(".tag");
      this.tagEle = tagEle;
      this.paper = document.querySelector(".tagBall");
      this.CX = this.paper.offsetWidth / 2;
      this.CY = this.paper.offsetHeight / 2;
      this.EX =
        this.paper.offsetLeft +
        document.body.scrollLeft +
        document.documentElement.scrollLeft;
      this.EY =
        this.paper.offsetTop +
        document.body.scrollTop +
        document.documentElement.scrollTop;
      this.innit();
    },

    innit() {
      for (let item in this.tagEle) {
        if (typeof this.tagEle[item] == "function") {
          this.animate();
          return;
        }
        if (typeof this.tagEle[item] == "number") {
          this.animate();
          return;
        }
        var k = -1 + (2 * (parseInt(item) + 1) - 1) / this.tagEle.length;
        var a = Math.acos(k);
        var b = a * Math.sqrt(this.tagEle.length * Math.PI);
        var x = this.nowSize(this.RADIUS * 4 * Math.sin(a) * Math.cos(b))
        var y = this.nowSize(this.RADIUS * Math.sin(a) * Math.sin(b))
        var z = this.nowSize(this.RADIUS * 4 * Math.cos(a));
        this.tagEle[item].style.color =
          "rgba(50, 197, 255, " + Math.floor(Math.random() * 10 + 2) / 10 + ")";
        this.tagEle[item].style.fontSize =  this.tagEle[item].getAttribute("name")+ "px";
        // this.tags.push(t);
        this.tags.push({ ele: this.tagEle[item], x, y, z });
        this.move(this.tagEle[item], x, y, z);
      }
    },
    move(ele, x, y, z) {
      var scale = this.fallLength / (this.fallLength - z);
      var alpha = (z + this.RADIUS) / (2 * this.RADIUS);
      var left = x + this.CX - ele.offsetWidth / 2 + "px";
      var top = y + this.CY - ele.offsetHeight / 2 + "px";
      var transform = "translate(" + left + ", " + top + ") ";
      // scale(" + scale + ")
      ele.style.opacity = alpha + 0.5;
      ele.style.zIndex = parseInt(scale * 100);
      ele.style.transform = transform;
      ele.style.webkitTransform = transform;
    },
    animate() {
      //   this.rotateX();
      if(this.stopAnimation) return
      this.rotateY();
      let that = this;
      this.tags.forEach(function (item) {
        that.move(item.ele, item.x, item.y, item.z);
      });

      requestAnimationFrame(this.animate);
    },
    // rotateX() {
    //   var cos = Math.cos(this.angleX);
    //   var sin = Math.sin(this.angleX);
    //   this.tags.forEach(function (item) {
    //     var y1 = item.y * cos - item.z * sin;
    //     var z1 = item.z * cos + item.y * sin;
    //     item.y = y1;
    //     item.z = z1;
    //   });
    // },
    // enter(){
    //   this.stopAnimation = true
    // },
    // leave(){
    //   this.stopAnimation = false
    //   this.animate()
    // },
    // changeAngleY(event) {
    //   var x = event.clientX - this.EX - this.CX;
    //   this.angleY = x * 0.00001;
    // },
    rotateY() {
      var cos = Math.cos(this.angleY);
      var sin = Math.sin(this.angleY);
      this.tags.forEach(function (item) {
        var x1 = item.x * cos - item.z * sin;
        var z1 = item.z * cos + item.x * sin;
        item.x = x1;
        item.z = z1;
      });
    },
  },
  beforeDestroy() {
    if (this.timer) {
      clearTimeout(this.timer); //关闭
    } //利用vue的生命周期函数
  },
};
</script>

<style scoped lang="less">
.wordCloud {
  height: 31.85vh;
  width: 58vw;
  margin: 4.7vh auto 0;
  /* background: #042860; */
  position: relative;
  .wordCloud-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 100%;
    .wordCloud-head {
      height: 7.22vh;
      display: flex;
      align-items: center;
      .title-sys {
        position: relative;
        color: #fff;
        font-size: 1.111vw;
        height: 3.09vh;
        padding-left: 0.486vw;
        display: flex;
        align-items: center;
        justify-content: center;
        font-weight: bold;
        span {
          width: 12.083vw;
          text-align: center;
          background-image: -webkit-linear-gradient(
            top,
            rgba(255, 255, 255, 1),
            rgba(155, 204, 255, 1)
          );
          -webkit-background-clip: text;
          -webkit-text-fill-color: transparent;
        }
        img {
          width: 16.667vw;
        }
      }
    }
  }
}

.tagBall {
  width: 100%;
  height: 100%;
  position: relative;
}

.tag {
  display: block;
  position: absolute;
  left: 0px;
  top: 0px;
  color: #000;
  text-decoration: none;
  font-size: 1.042vw;
  font-family: "微软雅黑";
  font-weight: 500;
  will-change: transform;
}

.tag:hover {
  border: 0.069vw solid #666;
  box-sizing: border-box;
}
</style>